<template>
  <div>
    <TopFilter
      ref="conditionFilter"
      :list="searchList"
      :cols="3"
      labelWidth="120"
      @filterChange="changeHandle"
    />
    <FilterTable
      ref="table"
      :columns="tableColumns"
      :isSelectColumn="isSelectColumn"
      :fetchapi="fetchApi"
      :params="searchData"
      :datakey="'records'"
      :onColumnsChange="tableColumns => this.tableColumns = tableColumns"
    >
      <template slot="controls">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-download"
          :loading="exportLoading"
          @click="requestExportData"
        >下载</el-button>
      </template>
    </FilterTable>
    <!-- 右侧浮动 -->
    <Drawer
      :visible.sync="visibleDrawer"
      title="营销素材明细"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <info-modal
        :type="handleTypeAdd"
        v-model="initData"
        :rowData="formData"
        @close="closeHandler"
      />
    </Drawer>
  </div>
</template>

<script>
import { exportExcelFile } from '@/utils/index';
import { dictionary } from '@/utils/dictMixin';
import { formatdateByDay } from '@/utils/index';
import { getMaterialList, getmaterialTypeOneList, getMaterialExcelList, selectMaterialListByBill } from '@/api/cms-api/projectOperating/program/push';
import infoModal from './info';
export default {
  // name: 'departmentServiceIndex',
  mixins: [dictionary],
  components: {
    infoModal
  },
  data() {
    return {
      searchList: this.getSearchList(), //搜索框配置
      tableColumns: this.getTableColumns(),
      isSelectColumn: false,
      visibleDrawer: false,
      initData: {},
      visibleDialog: false,
      fetchApi: getMaterialList, //调用API
      searchData: { isSearchParam: 1 }, //搜索数据
      // searchData: {}, //搜索数据
      visibleDrawer: false,
      exportLoading: false,
      formData: {},
      handleTypeAdd: ''
    };
  },
  methods: {
    //数据导出
    async requestExportData() {
      let r = await this.$refs.conditionFilter.GET_FORM_DATA();
      let p = null;
      if (r != null && r.length > 1) {
        p = r[1];
      }
      this.exportLoading = true;
      p = Object.assign({}, { isSearchParam: 1 }, p);
      getMaterialExcelList(p).then(res => {
        exportExcelFile(res.data, '营销素材查询');
        this.exportLoading = false;
      });
    },
    //搜索
    getSearchList() {
      return [
        { type: 'INPUT', label: '营销素材代码', fieldName: 'materialCode', placeholder: '请输入...' },
        { type: 'INPUT', label: '营销素材名称', fieldName: 'materialName', placeholder: '请输入...' },
        {
          type: 'SELECT',
          label: '营销素材状态',
          fieldName: 'materialStatus',
          placeholder: '请选择...',
          // itemList: this.createDictListRemoveCodes('2536', ['25361001', '25361002', '25361004', '25361006'])
          itemList: this.createDictList('2536')
        },
        {
          type: 'SELECT',
          label: '营销素材类型-一级',
          fieldName: 'materialTypeOne',
          placeholder: '请选择...',
          itemList: [],
          change: value => {
            this.initmaterialTypeTwo(value);
          }
        },
        {
          type: 'SELECT',
          label: '营销素材类型-二级',
          fieldName: 'materialTypeTwo',
          placeholder: '请选择...',
          itemList: [],
          change: value => {
            this.initmaterialTypeThree(value);
          }
        },
        {
          type: 'SELECT',
          label: '营销素材类型-三级',
          fieldName: 'materialTypeThree',
          placeholder: '请选择...',
          itemList: [],
          change: value => {
            this.initmaterialTypeFour(value);
          }
        },
        {
          type: 'SELECT',
          label: '营销素材类型-四级',
          fieldName: 'materialTypeFour',
          placeholder: '请选择...',
          itemList: [],
          change: value => {
            this.initmaterialTypeFive(value);
          }
        },
        { type: 'SELECT', label: '营销素材类型-五级', fieldName: 'materialTypeFive', placeholder: '请选择...', itemList: [] }
      ];
    },
    //取营销素材类型-一级
    async initmaterialTypeOne() {
      let res = [];
      this.dataParams = { parentTypeId: '' };
      let rd = await getmaterialTypeOneList(this.dataParams);
      for (let i in rd.data) {
        res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
      }
      this.searchList[3].itemList = res;
    },
    //取营销素材类型-二级
    async initmaterialTypeTwo(parentTypeId) {
      this.searchList.find(item => item.fieldName === 'materialTypeTwo').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeThree').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFour').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFive').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeTwo').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeThree').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFour').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = [];
      if (parentTypeId != '') {
        let res = [];
        this.dataParams = { parentTypeId: parentTypeId };
        let rd = await getmaterialTypeOneList(this.dataParams);
        for (let i in rd.data) {
          res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
        }
        this.searchList[4].itemList = res;
      }
    },
    //取营销素材类型-三级
    async initmaterialTypeThree(parentTypeId) {
      this.searchList.find(item => item.fieldName === 'materialTypeThree').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFour').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFive').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeThree').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFour').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = [];
      if (parentTypeId != '') {
        let res = [];
        this.dataParams = { parentTypeId: parentTypeId };
        let rd = await getmaterialTypeOneList(this.dataParams);
        for (let i in rd.data) {
          res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
        }
        this.searchList[5].itemList = res;
      }
    },
    //取营销素材类型-四级
    async initmaterialTypeFour(parentTypeId) {
      this.searchList.find(item => item.fieldName === 'materialTypeFour').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFive').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFour').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = [];
      if (parentTypeId != '') {
        let res = [];
        this.dataParams = { parentTypeId: parentTypeId };
        let rd = await getmaterialTypeOneList(this.dataParams);
        for (let i in rd.data) {
          res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
        }
        this.searchList[6].itemList = res;
      }
    },
    //取营销素材类型-五级
    async initmaterialTypeFive(parentTypeId) {
      this.searchList.find(item => item.fieldName === 'materialTypeFive').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = [];
      if (parentTypeId != '') {
        let res = [];
        this.dataParams = { parentTypeId: parentTypeId };
        let rd = await getmaterialTypeOneList(this.dataParams);
        for (let i in rd.data) {
          res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
        }
        this.searchList[7].itemList = res;
      }
    },
    //表单变更时赋值
    changeHandle(data) {
      if (data.materialStatus != null) {
        this.searchData = Object.assign({}, data);
      } else {
        this.searchData = Object.assign({}, { isSearchParam: 1 }, data);
      }
      console.log(data);
    },
    // //当展开收起时刷新高度？？
    // collapseHandle() {
    //   this.$nextTick(() => {
    //     this.BaseTable.EXECUTE_RESET_HEIGHT();
    //   });
    // },
    getTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            // if (props.row.materialStatus == '25361001' || props.row.materialStatus == '25361004') {
            //   return (
            //     <div>
            //       <el-button size="mini" type="text" onClick={() => this.drawerHandle(props.row, 'edit')}>
            //         编辑
            //       </el-button>
            //       <el-button size="mini" type="text" onClick={() => this.drawerHandle(props.row, 'show')}>
            //         明细
            //       </el-button>
            //     </div>
            //   );
            // } else {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.drawerHandle(props.row, 'show')}>
                  明细
                </el-button>
              </div>
            );
            // }
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '营销素材状态',
          dataIndex: 'materialStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.materialStatus, '2536')}</span>;
          }
        },
        { title: '营销素材代码', dataIndex: 'materialCode', sorter: true },
        { title: '营销素材名称', dataIndex: 'materialName', sorter: true },
        { title: '原始文件下载地址', dataIndex: 'originalFileUrl', hidden: true, sorter: true },
        { title: '来源部门', dataIndex: 'orgName', sorter: true },
        // {
        //   title: '营销素材类型-一级',
        //   dataIndex: 'materialTypeOne',
        //   sorter: true,
        //   hidden: true
        // },
        // {
        //   title: '营销素材类型-二级',
        //   dataIndex: 'materialTypeTwo',
        //   sorter: true,
        //   hidden: true
        // },
        // {
        //   title: '营销素材类型-三级',
        //   dataIndex: 'materialTypeThree',
        //   sorter: true,
        //   hidden: true
        // },
        // {
        //   title: '营销素材类型-四级',
        //   dataIndex: 'materialTypeFour',
        //   sorter: true,
        //   hidden: true
        // },
        // {
        //   title: '营销素材类型-五级',
        //   dataIndex: 'materialTypeFive',
        //   sorter: true,
        //   hidden: true
        // },
        {
          title: '营销素材类型-一级',
          dataIndex: 'materialTypeOneName',
          sorter: true
        },
        {
          title: '营销素材类型-二级',
          dataIndex: 'materialTypeTwoName',
          sorter: true
        },
        {
          title: '营销素材类型-三级',
          dataIndex: 'materialTypeThreeName',
          sorter: true
        },
        {
          title: '营销素材类型-四级',
          dataIndex: 'materialTypeFourName',
          sorter: true
        },
        {
          title: '营销素材类型-五级',
          dataIndex: 'materialTypeFiveName',
          sorter: true
        },
        // { title: '来源部门', dataIndex: 'sourceDept', sorter: true, hidden: true },
        {
          title: '是否需要反馈',
          dataIndex: 'isNeedFeedback',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.isNeedFeedback, '1004')}</span>;
          }
        },
        {
          title: '反馈截止日期',
          dataIndex: 'feedbackEndDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.feedbackEndDate)} </span>;
          }
        }
      ];
    },
    formatDates: function(value) {
      // 这里的 value 就是需要过滤的数据
      if (value == null || value == '') {
        return '';
      }
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + '-' + month + '-' + day;
    },
    openDialog() {
      this.visibleDialog = true;
    },
    closeDialog(data) {
      this.visibleDialog = false; //关闭弹窗
      //返回数据逻辑自己写
      console.log(data);
    },
    //详情
    async drawerHandle(row, type) {
      //明细
      if (type === 'show') {
        let res = {};
        this.handleTypeAdd = 'show';
        this.formData = row;
        let fileParams = { materialId: this.formData.materialId, billType: 25721001 };
        res = await selectMaterialListByBill(fileParams);
        if (res.data.length > 0) {
          let caseUrlList = [];
          for (let j = 0; j < res.data.length; j++) {
            let o1 = { name: res.data[j].fileName };
            let o2 = { url: res.data[j].fileId };
            let a = Object.assign(o1, o2);
            caseUrlList.push(a);
          }
          this.formData = Object.assign({}, { caseUrl: caseUrlList }, this.formData);
        }
        this.visibleDrawer = true;
      }
    },
    //关闭详情
    closeHandler(val, type) {
      this.visibleDrawer = false;
      if (type === 'refresh') {
        // 重新加载
        this.searchData = { ...this.searchData };
      }
    }
  },
  mounted() {
    //初始化营销素材类型-一级
    this.initmaterialTypeOne();
  }
};
</script>

<style>
.cover-container {
  width: 70vw !important;
}
</style>
